<template>
    <div>
        <div style="float: left;display: flex;margin-bottom: 10px;">
            <el-input
                @clear="OperateLog_input"
                clearable
                prefix-icon="el-icon-search"
                placeholder="请输入操作方法"
                v-model="OperateLogPage.operateMethod"
                @keydown.enter.native="initOperateLogListQuery">
            </el-input>
            <el-input
                @clear="OperateLog_input"
                clearable
                style="margin-left: 8px;"
                prefix-icon="el-icon-search"
                placeholder="请输入用户名称"
                v-model="OperateLogPage.userName"
                @keydown.enter.native="initOperateLogListQuery">
            </el-input>
            <el-select style="margin-left: 8px;width:50%" v-model="OperateLogPage.source" @clear="OperateLog_input" clearable placeholder="请选择">
                <el-option
                v-for="item in sources"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initOperateLogListQuery">查询</el-button>
            <el-button
                type="primary"
                @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
            </el-button>
        </div>
        <!-- 下 -->
        <div class="pageList">
            <el-table
                :data="OperateLogList"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                element-loading-text="正在加载..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
                <el-table-column
                        fixed
                        label="模块名称"
                        width="200">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>操作编号: {{ scope.row.operationId }}</p>
                            <p>模块名称: {{ scope.row.modelName }}</p>
                            <p>模块值: {{ scope.row.modelValue }}</p>
                            <p>返回值: {{ scope.row.returnValue }}</p>
                            <p>返回对象: {{ scope.row.returnClass }}</p>
                            <p>操作用户: {{ scope.row.realName }}</p>
                            <p>参数信息: {{ scope.row.paramAndValue }}</p>
                            <p>操作类: {{ scope.row.operateClass }}</p>
                            <p>操作方法: {{ scope.row.operateMethod }}</p>
                            <p>执行时间: {{ scope.row.costTime }} 毫秒</p>
                            <p>操作时间: {{scope.row.operateTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.modelName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="操作用户" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.realName }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="模块值"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.modelValue }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="返回值"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.returnValue }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="返回对象"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.returnClass }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="参数信息"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.paramAndValue }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :show-overflow-tooltip="true"
                        label="操作类"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.operateClass }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :show-overflow-tooltip="true"
                        label="操作方法"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.operateMethod }}</span>
                    </template>
                </el-table-column>
                 <el-table-column
                        label="执行时间"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.costTime }} 毫秒</span>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作时间" width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.operateTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="deleteLoginLogByLoginIds" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete">批量删除</i></el-button>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"OperateLoginLog",
    data(){
        return{
            loading:false,
            OperateLogList:[],
            OperateLogPage:{
                operateMethod: "",
                userName: "",
                source: 0,
                pageNum: 0,
                pageSize: 0,
            },
            total: 0,
            multipleSelection:[],
            sources:[{
                    value: 0,
                    label: '请选择'
                },{
                    value: 1,
                    label: '电脑端'
                },{
                    value: 2,
                    label: '安卓端'
                },{
                    value: 3,
                    label: '苹果端'
                },{
                    value: 4,
                    label: '微信端'
                }
            ],
        }
    },
    mounted(){
        this.initOperateLogListQuery();
    },
    methods:{
        // 初始化角色列表
        initOperateLogListQuery(){
            this.loading = true;
            this.postRequest("/log/OperateLog/query/OperateLogPageList",this.OperateLogPage).then(resp => {
                this.loading = false;
                if (resp) {
                    this.OperateLogList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        // 重置查询条件
        resetCondition(){
            this.OperateLogPage.operateMethod = '';
            this.OperateLogPage.userName = '';
            this.OperateLogPage.source = 0;
            this.initOperateLogListQuery();
        },
        OperateLog_input(){
          this.resetCondition();
        },
        // 批量删除
        deleteLoginLogByLoginIds(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let operationIds = '?';
                this.multipleSelection.forEach(item=>{
                operationIds += 'operationIds='+item.operationId+'&';
            })
            this.deleteRequest("/log/OperateLog/delete/OperateLogByOperationIds"+ operationIds).then(resp=>{
            if (resp){
                this.initOperateLogListQuery();
            }
            })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        // 分页
        sizeChange(currentSize) {
            this.OperateLogPage.pageSize = currentSize;
            this.initOperateLogListQuery();
        },
        currentChange(currentPage) {
            this.OperateLogPage.pageNum = currentPage;
            this.initOperateLogListQuery();
        }
    }
}
</script>

<style>

</style>
